<template>
  <div class="user">
    <div class="user_list">
      <ul>
        <li>
          <h3 style="margin-top: 30px; font-size: 15px; font-weight: bold;">基本信息(mode)</h3>
          <div class="user_acount">
            <span>账号：</span>
            <span>Lin_X1999@outlook.com</span>
          </div>
          <div class="user_acount user_state" >
            <span>登录状态：</span>
            <span style="color: green;">Online</span>
          </div>

          <div class="user_acount user_money" >
            <span>账号余额: </span>
            <span style="color: rgb(255, 0, 0);">￥170000</span>
          </div>
        </li>
        <li>
          <h3 style="margin-top: 30px; font-size: 15px; font-weight: bold;">登录方式(mode)</h3>
          <div class="login user_acount" style="color: #888;">
            <span>微信： </span>
            <span>支持微信扫码授权登录</span>
          </div>
          <div class="login_acount user_acount">
            <span>Lin：</span>
            <span style="color: blue;"><a href="#">修改</a></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>



<style scoped>
.user {
  margin-top: 400px;
  text-align: center;
}


.user_list ul{
  display: flex;
  justify-content: space-evenly;
  
}


.user_list ul li {
  height: 380px;
  width: 320px;
  background-color: #f8f8f8;
  box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
  transition: all 0.5s;
}

.user_list ul li:hover {
  transform: translateY(-10px);
}


.user_acount {

  align-items: center;
  margin-top: 40px;
}

.user_state{
  margin-right: 96px;
}

.user_money {
  margin-right: 82px;
}


.login_acount {
  margin-right: 120px;
}


</style>